<template>
	<view class="content">
		<view class="myads_top">
			<view class="myads_top_L" @tap="addedit">
				<text class="iconfont icon-54"></text>
				<text>新增地址</text>
			</view>
			<text @tap="edittap">{{chose?'完成':'管理'}}</text>
		</view>
		<view class="myads_content">
			<view class="myads_content_li" v-for="(item,index) in adslist" :key='index' :style="item.selected?'background: #f5f5f5;':''">
				<text class="iconfont icon-duihao2" :style="item.status?'color: #e5e5e5;':'color:#5a70fb'" v-if="chose" @tap='statustap(index)'></text>
				<view :class="currentItemId == index?'active myads_content_li_M':'myads_content_li_M' " @tap="chosetap(item)">
					<view class="li_M_name">
						<text>{{item.name}}</text>
						<text class="phone">{{item.phone}}</text>
						<text class="icon">默认</text>
					</view>
					<view class="li_M_ads">
						<text>{{item.ads}}</text>
						<text>{{item.adsall}}</text>
					</view>
				</view>
				<text class="iconfont icon-wentifankui1" @tap="addedit"></text>
			</view>
		</view>
		<button @tap='dalete' v-if="woshidujiao" >删除</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chose: false,
				select: false, //是否开启选择功能
				woshidujiao:false, //是否删除
				currentItemId:1,
				adslist:[
					{
						name:'张珊珊',
						phone:'1254545456',
						ads:'陕西省西安市未央区',
						adsall:'凤城二路海洋大厦前进花园',
						status: false,
						selected:true
					},
					{
						name:'高宁',
						phone:'18256458951',
						ads:'陕西省西安市浐灞',
						adsall:'凤城二路海洋大厦前进花园',
						status: true,
						selected:false
					},
					{
						name:'李婵',
						phone:'15485621478',
						ads:'陕西省渭南市临渭区',
						adsall:'凤城二路海洋大厦前进花园',
						status: true,
						selected:false
					}
				]
			};
		},
		methods:{
			// 勾选
			statustap(index){
				console.log(index)
				this.adslist[index].status=!this.adslist[index].status;
			},
			// 管理
			edittap(){ 
				this.woshidujiao = !this.woshidujiao;
				this.chose = !this.chose;
			},
			chosetap(item){
				console.log(item)
				// this.currentItemId = index;
				try {
					uni.setStorageSync('ads', item);
				} catch (e) {
					// error
				}
				uni.navigateBack({
					delta: 1
				})
			},	
			// 删除
			dalete(){
				let ads = this.adslist;
// 				for(var i = 0 ; i<ads.length;i++){
// 					if(ads[i].status){
// 						ads.splice(i--,1)
// 					}
// 				}
			},
			addedit(){
				uni.navigateTo({
					url: '/pages/edit/edit'
				})
			}
		},
		onLoad(opt) {
			//判断是否从release页面进入，如果是则开启选择功能
			if(opt.select){
				this.select = true
			}
		}
	}
</script>

<style>
	.content{
		box-shadow:0 8px 10px -8px #eee inset;
		border-top: 1px solid #eee;
	}
	
.myads_top{
	display: flex;
	justify-content: space-between;
	line-height: 100upx;
	margin: 0 3%;
	width: 94%;
	box-sizing: border-box;
	overflow: hidden;
	border-bottom: 1px solid #eeeeee;
}
.myads_top_L{
	color: #596FFE;
	width: 590upx;
	float: left;
	display:inline-block;
}
.myads_top_L .iconfont{
	font-size: 34upx;
	font-weight: 600;
	margin-right: 15upx;
}
.myads_top_L .iconfont{
	font-size: 36upx;
}
.li_M_name .icon{
	color: #5a70fb;
	border: 1px solid #5a70fb;
	font-size: 22upx;
	padding: 0 15upx;
	border-radius: 50upx;
	display: inline-block;
	line-height: 30upx;
	height: 30upx;
}
.li_M_ads{
	color: #a4a8b4;
	font-size: 24upx;
}
.myads_content{
	/* padding: 0 20upx; */
	box-sizing: border-box;
}
.li_M_name{
	padding-bottom: 20upx;
}
.li_M_name .phone{
	padding: 0 20upx;
}
.myads_content_li{
	display: flex;
	border-bottom: 1px solid #eeeeee;
	align-items: center;
	padding: 40upx 20upx;
	box-sizing: border-box;
}
.li_M_ads text{
	display:block ;
}
.li_M_ads text::last-child{
	padding-bottom: 30upx;
}
.myads_content_li_M{
	padding: 0 20upx;
	box-sizing: border-box;
	width: 600upx;
}
.icon-duihao2{
	font-size: 44upx;
}
.icon-wentifankui1{
	color: #d9d9d9;
	font-size: 54upx;
}
button{
	background: #ff5d76;
	color: #fff;
	border-radius: 50upx;
	width: 250upx;
	line-height: 70upx;
	height: 70upx;
	margin-top: 230upx;
	font-size: 34upx;
}
button:after{
	border: none;
}
</style>
